<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <style type="text/css">
      body {
          text-align: center;
      }
      div#center{
          width: 800px;
          margin: 0 auto;
          text-align: left;
      }
      .tbl{
          width: 100%;
          border-collapse: separate;
      }
      .tbl th{
          width: 20%;
          padding: 6px;
          text-align: left;
          vertical-align: top;
          color: #333;
          background-color: #eee;
          border: 1px solid #b9b9b9;
      }
      .tbl td{
          padding: 6px;
          background-color: #fff;
          border: 1px solid #b9b9b9;
      }
      .frm {
          min-height: 10px;
          padding: 0 10px 0;
          margin-bottom: 20px;
          background-color: #f5f5f5;
          border: 1px solid #e3e3e3;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
          -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
          box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
      }
      .txar {
          border:10px;
          padding:10px;
          font-size:1.1em;
          font-family:Arial, sans-serif;
          border:solid 1px #ccc;
          margin:0;
          width:95%;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
          -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
          box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
      }
      #box {
          width:100%;
          margin:10px;
          auto;
      }
  </style>
  <meta charset="utf-8">
  <title>Kagome WebAssembly Demo - Japanese morphological analyzer</title>
</head>
<body>

<!-- loading... -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-corner-indicator.min.css" />

<!-- wasm kagome -->
<script src="wasm_exec.js"></script>
<script>
    if (!WebAssembly.instantiateStreaming) { // polyfill
        WebAssembly.instantiateStreaming = async (resp, importObject) => {
            const source = await (await resp).arrayBuffer();
            return await WebAssembly.instantiate(source, importObject);
        };
    }
    const go = new Go();
    WebAssembly.instantiateStreaming(fetch("kagome.wasm"), go.importObject).then((result) => {
        go.run(result.instance);
    }).catch((err) => {
        console.error(err);
    });
</script>


<div id="center">
  <h1>Kagome WebAssembly Demo</h1>
  <!--
  <a href="https://github.com/ikawaha/kagome.ipadic/blob/gh-pages/wasm_sample.go">=>source code</a>
  -->
  <form class="frm" oninput="tokenize()">
    <div id="box">
      <textarea id="inp" class="txar" rows="3" name="s" placeholder="Enter Japanese text below."></textarea>
    </div>
  </form>

  <table class="tbl">
    <thread><tr>
      <th>Surface</th>
      <th>Part-of-Speech</th>
      <th>Base Form</th>
      <th>Reading</th>
      <th>Pronunciation</th>
    </tr></thread>
    <tbody id="morphs">
    </tbody>
  </table>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
    function tokenize() {
        var s = document.getElementById("inp").value;
        ret = kagome_tokenize(s)
        $("#morphs").empty();
        $.each(ret, function(i, val) {
            console.log(val);
            var pos = "*", base = "*", reading = "*", pronoun = "*";
            $("#morphs").append(
                "<tr>"+"<td>" + val.surface_form + "</td>" +
                "<td>" + val.pos + "</td>"+
                "<td>" + val.base_form + "</td>"+
                "<td>" + val.reading + "</td>"+
                "<td>" + val.pronunciation + "</td>"+
                "</tr>"
            );
        });
    }
</script>

</body>
</html>